<template>
  <div class="dashboard-container">
    <div>
      <el-form>
        <el-form-item label="输入要查找的功能">
          <el-input v-model="form.input"  type="input"  />
        </el-form-item>
      <!-- <el-form-item label="显示结果">
        <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 5, maxRows: 10}"/>
      </el-form-item> -->
      </el-form>
    <div class="editor-container">
      <mavon-editor :value="form.result" :subfield=false defaultOpen="preview" :toolbarsFlag=false />
    </div>
    </div>

  </div>
</template>
<script>
import { mapGetters } from 'vuex'
import {getDoc} from '@/api/salt'
import Vue from 'vue'
import Saltdoc from '@/utils/saltdoc'
import MarkdownEditor from '@/components/MarkdownEditor'

Vue.use(Saltdoc)
export default {
    name: 'Dashboard',
    data(){
        return {
            form: {
                desc: null,
                input: null,
                result: '',
            },
            saltdoc: Vue.prototype.SaltDoc,
            toolbars: {
              subfield: false,
              defaultOpen: 'preview',
              preview: true,
            }
        }
    },
    computed: {
    ...mapGetters([
      'name'
    ])
  },
  components: { MarkdownEditor },
  watch: {
      'form.input': function(){
          var k = this.form.input
          var ret = []
          this.form.result = ''
          console.log(this.Saltdoc)
          for( var i in this.Saltdoc){
              if(i.startsWith(k)){
                //   ret.push({i:this.Saltdoc[i]})
                console.log('----:', i)
                  this.form.result += '### '+i + '\n' +this.Saltdoc[i] + '\n'
              }
          }

          console.log(ret)
      }
  },
  methods: {
    doc(){
        var data = Vue.prototype.SaltDoc.return[0]
        var k = Object.keys(data)[0]
        var resp = data[k]
        this.form.desc = JSON.stringify(Object.keys(resp))
        console.log(resp)
    //   getDoc().then(response => {
    //     var resp = response.data
    //     this.form.desc = JSON.stringify(resp)
    //   })
    },
  },
  created(){
      getDoc().then(response => {
        var data = response.data.return[0]
        var k = Object.keys(data)[0]
        var resp = data[k]
        this.Saltdoc = resp
        console.log(this.Saltdoc)
        // this.form.desc = resp['state.apply']
      })
    //   console.log(this.Saltdoc['state.apply'])
      console.log('Load Down')
    }
}
</script>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
pre {
    outline: 1px solid #ccc;
    padding: 5px;
    margin: 5px;
    // background: gainsboro;
    background-color: #80808038
}
</style>
